<template>
	<!-- <view class="outside"> -->
	<scroll-view scroll-y="true" class="content">
		<view class="picker">
			<view class="row" v-for="(item,index) in orderList">
				<view class="name">{{index==0?'预约活动':''}}</view>
				<view class="uni-input">{{item.title}}</view>
			</view>
			<!-- <view class="row">
				<view class="name">预约日期</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view> -->
			<view class="row">
				<view class="name">预约类型</view>
				<!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
				<view class="uni-input">{{array[index]}}</view>
				<!-- </picker> -->
			</view>
			<!-- <view class="row">
				<view class="name">预约类型</view>
				<picker @change="bindPickerChange2" :value="timingIndex" :range="timingArray">
					<view class="uni-input">{{timingArray[timingIndex]}}</view>
				</picker>
			</view> -->
		</view>
		<view class="checker">
			<singleTiming class="item" v-for="(item,index) in timingArray" :timeStr="item.timeStr" :status="item.status"
				:date="item.date" :num="item.num" :index="index" @timingChange="timingChange">
			</singleTiming>
		</view>
		<button class="buttom" @click="handlerClick">确认预约</button>
	</scroll-view>
	<!-- </view> -->
</template>

<script>
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	import singleTiming from '../customer/singleTiming.vue'
	export default {
		components: {
			singleTiming
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id: undefined,
				orderList: [],
				date: currentDate,
				index: 0,
				array: ['参观预约', '特展预约', '社教活动预约', '讲座预约'],

				timingIndex: undefined,
				timingArray: []
			}
		},
		onLoad: function(option) {
			// if (option.list) {
			// 	let list = JSON.parse(decodeURIComponent(option.list));
			// 	this.orderList = list
			// }
			this.getTicketNum()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			for (let item of this.timingArray) {
				if (item.status == 1) {
					this.checked = true
					return
				}
			}
			this.checked = false
		},
		methods: {
			getTicketNum() {
				doGet('/blade-order/ord/ticketsNum?id=' + this.id, (res) => {
					let list = []
					let a = new Date()
					a.setDate(a.getDate() + 0)

					let b = new Date()
					b.setDate(b.getDate() + 1)

					let c = new Date()
					c.setDate(c.getDate() + 2)

					let d = new Date()
					d.setDate(d.getDate() + 3)

					let e = new Date()
					e.setDate(e.getDate() + 4)

					let f = new Date()
					f.setDate(f.getDate() + 5)

					let g = new Date()
					g.setDate(g.getDate() + 6)

					list.push({
						date: a.getTime(),
						status: res.firstDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.firstDay
					})
					list.push({
						date: a.getTime(),
						status: res.firstDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.firstDayHalf
					})
					list.push({
						date: b.getTime(),
						status: res.secondDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.secondDay
					})
					list.push({
						date: b.getTime(),
						status: res.secondDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.secondDayHalf
					})
					list.push({
						date: c.getTime(),
						status: res.thirdDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.thirdDay
					})
					list.push({
						date: c.getTime(),
						status: res.thirdDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.thirdDayHalf
					})
					list.push({
						date: d.getTime(),
						status: res.fourthDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.fourthDay
					})
					list.push({
						date: d.getTime(),
						status: res.fourthDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.fourthDayHalf
					})
					list.push({
						date: e.getTime(),
						status: res.fifthDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.fifthDay
					})
					list.push({
						date: e.getTime(),
						status: res.fifthDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.fifthDayHalf
					})
					list.push({
						date: f.getTime(),
						status: res.sixthDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.sixthDay
					})
					list.push({
						date: f.getTime(),
						status: res.sixthDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.sixthDayHalf
					})
					list.push({
						date: g.getTime(),
						status: res.seventhDay == 1000 ? 2 : 0,
						timeStr: '9:00-14:00',
						num: 1000 - res.seventhDay
					})
					list.push({
						date: g.getTime(),
						status: res.seventhDayHalf == 1000 ? 2 : 0,
						timeStr: '14:00-19:00',
						num: 1000 - res.seventhDayHalf
					})
					this.timingArray = list
				}, (err) => {

				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			handlerClick() {
				if (this.timingIndex == undefined) {
					uni.showToast({
						title: '请选择参观时段',
						icon: 'error'
					});
					return
				}
				let checkedItem = this.timingArray[this.timingIndex]
				let date = new Date(checkedItem.date)
				if (this.timingIndex % 2 == 0) {
					date.setHours(9)
					date.setMinutes(0)
					date.setSeconds(0)
					date.setMilliseconds(0)
				} else {
					date.setHours(14)
					date.setMinutes(0)
					date.setSeconds(0)
					date.setMilliseconds(0)
				}
				let params = {
					date: date.getTime(),
					type: this.index + 1,
				}
				uni.navigateTo({
					url: "../order/order2?params=" + encodeURIComponent(JSON.stringify(params))
				})
			},
			timingChange(index) {
				this.timingIndex = index
				let list = this.timingArray
				for (let item of list) {
					if (item.status != 2) {
						item.status = 0
					}
				}
				list[index].status = 1
				this.timingArray = list
				this.timingIndex = index
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #eee;
	}

	/* .outside{
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
		background: #eee;
	}
	.content {
		width: 100%;
		height: auto;
	}
 */
	.picker {
		width: 100%;
		height: auto;
		padding: 40rpx 40rpx;
		background: #fff;
	}

	.row {
		display: flex;
		/* margin-bottom: 40rpx; */
	}

	.name {
		width: 160rpx;
		line-height: 60rpx;
		color: #333;
	}

	.uni-input {
		width: 480rpx;
		color: #999;
		font-size: 30rpx;
		padding: 8rpx 15rpx;
		border: 2rpx solid #999;
		border-radius: 10rpx;
	}

	.checker {
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx 0;
		padding: 20rpx;
		background: #fff;
		align-items: center;
		justify-content: flex-start;
	}

	.checker .item {
		flex: 0 0 calc(50% - 40rpx);
		margin: 20rpx;
		height: 180rpx;
	}

	.buttom {
		background: #b9ac90;
		margin: 40rpx;
		color: #fff;
		margin-bottom: 40rpx;
	}
</style>
